<template>
  <a-modal :open="visible" :title="form.storeId?'修改':'添加'" :width="700" forceRender ok-text="确认" cancel-text="取消" @ok="onSubmit" @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }">
      <a-form-item label="门店名称" name="storeName">
        <a-input v-model:value="form.storeName" placeholder="请输入门店名称" />
      </a-form-item>

      <a-form-item label="门店图标" name="pic">
        <Upload
          accept=".jpg,.jpeg,.png,.gif"
          :maxUploadSize="1"
          buttonText="点击上传门店图标"
          :default-file-list="form.picList"
          @change="picChange"
        />
      </a-form-item>


      <a-form-item label="联系人" name="userName">
        <a-input v-model:value="form.userName" placeholder="请输入联系人" />
      </a-form-item>
      <a-form-item label="手机号" name="phone">
        <a-input v-model:value="form.phone" placeholder="请输入手机号" />
      </a-form-item>

      <a-form-item label="详细地址" name="address">
        <a-input v-model:value="form.address" placeholder="请输入详细地址" />
      </a-form-item>

      <a-form-item label="说明" name="remark">
        <a-input v-model:value="form.remark" placeholder="请输入说明" />
      </a-form-item>
      <a-form-item label="启用状态" name="status">
        <a-switch v-model:checked="enabledChecked" @change="enabledCheckedChange" />
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script setup>
  import { message } from 'ant-design-vue';
  import _ from 'lodash';
  import { nextTick, reactive, ref ,watch} from 'vue';
  import { storeApi } from '/@/api/business/store-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { regular } from '/@/constants/regular-const';
  import { smartSentry } from '/@/lib/smart-sentry';

  defineExpose({
    showModal,
  });
  const emit = defineEmits(['refresh']);

  // --------------------- modal 显示与隐藏 ---------------------
  // 是否展示
  const visible = ref(false);

  function showModal(storeId) {
    Object.assign(form, formDefault);
    if (storeId) {
      detail(storeId);
    }else{
      resetFormData();
    }
    visible.value = true;
  }

  function onClose() {
    visible.value = false;
    resetFormData();
  }

  async function detail(storeId) {
    try {
      let result = await storeApi.detail(storeId);
      let data = result.data;
      Object.assign(form, data);
      enabledChecked.value = data.status==1;
      form.picList =[{url: data.pic, fileUrl: data.pic}]
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }

  // --------------------- 表单 ---------------------

  //  组件
  const formRef = ref();

  const formDefault = {
    storeId: undefined,
    storeName: undefined,
    userName: undefined,
    pic: undefined,
    picList: undefined,
    phone: undefined,
    remark: undefined,
    address: undefined,
    status: 1,
  };
  let form = reactive({ ...formDefault });
  const rules = {
    storeName: [{ required: true, message: '请输入门店名称' }],
    userName: [{ required: true, message: '请输入联系人' }],
    phone: [
      { required: true, message: '请输入手机号' },
      { pattern: regular.phone, message: '请输入正确的手机号', trigger: 'blur' },
    ],
  };

  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
          if (form.storeId) {
            await storeApi.update(form);
          } else {
            await storeApi.create(form);
          }
          message.success(`${form.id ? '修改' : '添加'}成功`);
          emit('refresh');
          onClose();
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }

  // 状态
  const enabledChecked = ref(true);

  function enabledCheckedChange(checked) {
    form.status = checked?1:0;
  }

  function picChange(fileList) {
    console.log(fileList)
    form.pic = fileList[0].url
  }
  // 重置表单数据
  function resetFormData() {
    Object.assign(form, formDefault);
    enabledChecked.value=true;
  }
</script>

<style lang="less" scoped>
  .form-width {
    width: 100% !important;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  :deep(.ant-card-body) {
    padding: 10px;
  }
</style>
